<template>
    <div style="background-color: #d4e1f1">
    <div style="color: rebeccapurple;margin-right: 900px;height: 10px"></div>
        <div style="margin-right: 80%">
        <el-button type="success"   @click="dialogVisible =true" >添加</el-button>
        <el-button type="info"   @click="deleteFileOrDirectory1(sels)" >编辑</el-button>
        <el-button type="danger" plain  @click="deleteFileOrDirectory(sels)">删除</el-button>
        </div>
            <el-form :inline="true" class="demo-form-inline">
                <!--      模糊-->
                <el-form-item style="margin-right: 100px">
                    <el-input
                            v-model="search"
                            class="search_name"
                            size="mini"
                            placeholder="房号">
                    </el-input>
                </el-form-item>
                <el-form-item style="margin-right: 100px">
                    <el-input
                            v-model="search2"
                            class="search_name"
                            size="mini"
                            placeholder="业主">
                    </el-input>
                </el-form-item>
                <el-form-item style="margin-right: 100px">
                    <el-input
                            v-model="search3"
                            class="search_name"
                            size="mini"
                            placeholder="装修公司">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                            round
                            type="text"
                            @click="onSearch()"
                            style="background: #FEFEFE; width: 100px;height: 40px"
                    ><icon class="el-icon-search"/> 查询
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button
                            class="el-icon-refresh"
                            type="text"
                            @click="refreshData">刷新
                    </el-button>
                </el-form-item>
                <!--      增加-->
            </el-form>
<div style="color: rebeccapurple;margin-right: 1000px" >
            <!--    查询-->
            </div>
            <el-table :data="users.slice((currentPage-1)*pagesize,currentPage*pagesize)"   @selection-change="selsChange">
                <el-table-column
                        type="selection"
                        width="55" >
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                style="width: 60px;"
                                size="mini"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                        >编辑
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="业主名称" prop="yzname"/>
                <el-table-column label="维修公司" prop="zxgs"/>
                <el-table-column label="所属楼栋" prop="lh"/>
                <el-table-column label="所属楼层" prop="lc"/>
                <el-table-column label="房号" prop="fangh"/>
                <el-table-column label="楼层计柜位号" prop="lcgw"/>
                <el-table-column label="施工人员" prop="sgry"/>
                <el-table-column label="出入证押金" prop="crzyj"/>
                <el-table-column label="出入证工本费" prop="crzgbf"/>
                <el-table-column label="维修保证金" prop="zxbzj"/>
                <el-table-column label="垃圾清运费" prop="ljqy"/>
            </el-table>
            <!--添加页面-->
            <el-dialog
                    title="商铺装修费用管理"
                    :visible.sync="dialogVisible"
                    append-to-body
                    :before-close="handleClose">
                <el-form   :model="ruleForm1" ref="ruleForm" label-width="100px" class="demo-ruleForm" :inline="true">
                    <el-form-item label="业主名称" prop="yzname">
                        <el-input v-model="ruleForm1.yzname" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="维修公司" prop="zxgs">
                        <el-input v-model="ruleForm1.zxgs" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="所属楼栋" prop="lh">
                        <el-input v-model="ruleForm1.lh" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="所属楼层" prop="lc">
                        <el-input v-model="ruleForm1.lc" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="房号" prop="fangh">
                        <el-input v-model="ruleForm1.fangh" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="楼层计柜位号" prop="lcgw">
                        <el-input v-model="ruleForm1.lcgw" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="施工人员" prop="sgry">
                        <el-input v-model="ruleForm1.sgry" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="出入证押金" prop="crzyj">
                        <el-input v-model="ruleForm1.crzyj" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="出入证工本费" prop="crzgbf">
                        <el-input v-model="ruleForm1.crzgbf" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="维修保证金" prop="zxbzj">
                        <el-input v-model="ruleForm1.zxbzj" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="垃圾清运费" prop="ljqy">
                        <el-input v-model="ruleForm1.ljqy" style="width: 150px"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item label="备注" >
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="textarea"
                                style="width: 410px"    >
                        </el-input>
                    </el-form-item><br>
                </el-form>
                <el-button round @click="cancel()" style="width: 150px;margin-left: 20px"   ><el-image src="" style="width: 20px"></el-image> 取 消</el-button>
                <el-button round @click="addUser()" type="primary" style="width: 150px"> <el-image src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1954671725,2900034259&fm=26&gp=0.jpg" style="width: 20px"></el-image>确定</el-button>
                <span slot="footer" class="dialog-footer"><span slot="footer" class="dialog-footer"></span></span>
            </el-dialog>
            <!--修改页面-->
            <el-dialog
                    title="编辑"
                    :append-to-body='true'
                    :visible.sync="dialogUpdate"
            >
                <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" :inline="true">
                    <el-form-item label="业主名称" prop="yzname">
                        <el-input v-model="ruleForm.yzname" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="维修公司" prop="zxgs">
                        <el-input v-model="ruleForm.zxgs" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="所属楼号" prop="ld">
                        <el-input v-model="ruleForm.lh" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="所属楼层" prop="lc">
                        <el-input v-model="ruleForm.lc" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="房号" prop="fangh">
                        <el-input v-model="ruleForm.fangh" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="楼层计柜位号" prop="lcgw">
                        <el-input v-model="ruleForm.lcgw" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="施工人员" prop="sgry">
                        <el-input v-model="ruleForm.sgry" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="出入证押金" prop="crzyj">
                        <el-input v-model="ruleForm.crzyj" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="出入证工本费" prop="crzgbf">
                        <el-input v-model="ruleForm.crzgbf" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="维修保证金" prop="zxbzj">
                        <el-input v-model="ruleForm.zxbzj" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="垃圾清运费" prop="ljqy">
                        <el-input v-model="ruleForm.ljqy" style="width: 150px"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer" style="margin-right: 100px">
                           <span slot="footer" class="dialog-footer">
              <el-button @click="cancel()" style="width: 300px"   >取 消</el-button>
              <el-button @click="updateUser()" type="primary" style="width: 300px">确定</el-button>
            </span>
            </span>
            </el-dialog>
            <el-dialog
                    title="编辑"
                    :append-to-body='true'
                    :visible.sync="dialogUpdate1"
            >
                <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" :inline="true">

                    <el-form-item label="业主名称" prop="yzname">
                        <el-input v-model="ruleForm.yzname" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="维修公司" prop="zxgs">
                        <el-input v-model="ruleForm.zxgs" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="所属楼号" prop="lh">
                        <el-input v-model="ruleForm.lh" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="所属楼层" prop="lc">
                        <el-input v-model="ruleForm.lc" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="房号" prop="fangh">
                        <el-input v-model="ruleForm.fangh" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="楼层计柜位号" prop="lcgw">
                        <el-input v-model="ruleForm.lcgw" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="施工人员" prop="sgry">
                        <el-input v-model="ruleForm.sgry" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="出入证押金" prop="crzyj">
                        <el-input v-model="ruleForm.crzyj" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="出入证工本费" prop="crzgbf">
                        <el-input v-model="ruleForm.crzgbf" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="维修保证金" prop="zxbzj">
                        <el-input v-model="ruleForm.zxbzj" style="width: 150px"></el-input>
                    </el-form-item>
                    <el-form-item label="垃圾清运费" prop="ljqy">
                        <el-input v-model="ruleForm.ljqy" style="width: 150px"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer" style="margin-right: 100px">
                           <span slot="footer" class="dialog-footer">
              <el-button @click="cancel()" style="width: 300px"   >取 消</el-button>
              <el-button @click="updateUser()" type="primary" style="width: 300px">确定</el-button>
            </span>
            </span>
            </el-dialog>
            <!--修改页面-->
            <br>
            <div class="pages" style="align-content: center">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[3, 6, 9, 12]"
                        :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        style="margin-right: 800px;width: 100px">
                </el-pagination>
            </div>
    </div>
</template>

<script>

    export default {
        name: 'ysList',
        inject: ['reload'],
        data () {
            return {
                uuu: [],
                textarea: '',
                ssldun: [],
                sels: [],
                ssld: [],
                sslochen: [],
                users: [

                ],
                fh: [],
                depatment: '',
                depss: [],
                search: '',
                search2: '',
                search3: '',
                dialogVisible: false,
                dialogUpdate: false,
                dialogUpdate1: false,
                schArr: [], // 分页数据源
                pagesize: 3,
                currentPage: 1,
                total: 0,

                disablePage: false,
                ruleForm: {
                    schArr: [],
                    tableData: [],
                    search: '',
                    dialogVisible: false,
                    dialogUpdate: false,
                    dialogUpdate1: false,
                    pageSize: 3,
                    currentPage: 1,
                    total: 0,
                    disablePage: false
                },
                ruleForm1: {

                },
                pages: {
                    xzid: '1',
                    yzname: '1',
                    lh: '1',
                    fangh: '1',
                    sgry: '1',
                    crzyj: '1',
                    crgbf: '1',
                    zxgs: '1',
                    lc: '1',
                    lcgw: '1',
                    zxbzj: '1',
                    ljqy: '1'
                },
                formInline1: {
                    xzid: '',
                    fh: ''
                },
                formInline4: {
                    xzid: '',
                    fangid: '',
                    fangh: '',

                },
                formInline2: {
                    xzid: '',
                    lc: '',
                    lcgw: '',

                },
                formInline3: {
                    xzid: '',
                    ld: '',
                    lcgw: ''
                },
                formInline: {
                    xzid: '1',
                    yzname: '1',
                    lh: '1',
                    fangh: '1',
                    sgry: '1',
                    crzyj: '1',
                    crgbf: '1',
                    zxgs: '1',
                    lc: '1',
                    lcgw: '1',
                    zxbzj: '1',
                    ljqy: '1'

                }
            }
        },
        created () {
            const that = this
            this.getPages()
            this.$axios.post('http://localhost:8081/selectXiezilou')
                .then(function (response) {
                    console.log(response)
                    that.users = response.data
                })
            this.$axios.post('/selectXiezilou')
                .then(function (response) {
                    console.log(response)
                    that.formInline4 = response.data
                })
        },
        watch: {
            // watch就是用来监控数据变化，只有变化了才会调用定时器的变化
            search () {
                // 调用定时器
                this.timer()
            },
            search2 () {
                // 调用定时器
                this.timer()
            },
            search3 () {
                // 调用定时器
                this.timer()
            }
        },
        // 页面销毁后 停止计时器
        destroyed () {
            clearTimeout(this.timer)
        },
        mounted () {
            this.getDep()
        },
        function2 (val) {
            console.log(val) // 此时打印的直接就是id
        },
        methods: {
            function2 (val) {
                console.log(val) // 此时打印的直接就是id
            },
            function1 () {
                const that = this
                this.$axios.post('/selectYz1')
                    .then(function (response) {
                        that.ssld = response.data // 把获取到的数据赋给this.data
                        console.log(that.ssld)
                    })
            },
            function4 () {
                const that = this
                this.$axios.post('/selectLoudun1')
                    .then(function (response) {
                        that.ssldun = response.data.log // 把获取到的数据赋给this.data
                        console.log(that.ssldun)
                    })
            },
            function5 () {
                const that = this
                this.$axios.post('/selectLouc1')
                    .then(function (response) {
                        that.sslochen = response.data // 把获取到的数据赋给this.data
                        console.log(that.sslochen)
                    })
            },
            function3 (val) {
                const that = this
                this.$axios.post('/selectFang111?fid=' + val)
                    .then(function (response) {
                        that.fh = response.data // 把获取到的数据赋给this.data
                        console.log(that.fh)
                    })
                this.ruleForm.fid = val
                this.ruleForm.fhao = ''
            },
            function6 (name) {
                this.ruleForm.yid = name
            },
            function7 (ldun) {
                this.ruleForm.lcid = ldun
            },
            function8 (fhao) {
                this.ruleForm.id = fhao
            },
            handleSizeChange (val) {
                this.getPageData()
                var s = this
                console.log(`每页 ${val} 条`)
                s.pagesize = val
                s.getPageData()
                console.log(s.pagesize)
            },
            handleCurrentChange (val) {
                this.getPageData()
                var ss = this
                console.log(`当前页: ${val}`)
                ss.currentPage = val
                ss.getPageData()
                console.log(ss.currentPage)
            },
            getPageData () {
                console.log('是否yes')
                var thats = this
                let start = (this.currentPage - 1) * this.pagesize
                let end = start + this.pagesize
                this.schArr = thats.users.slice(start, end)
                this.total = thats.users.length
            },
            selsChange (sels) {
                this.sels = sels
            },
            deleteFileOrDirectory () {
                var ids = this.sels.map(item => item.xzid).join()// 获取所有选中行的id组成的字符串，以逗号分隔
                this.$confirm('此操作将删除该数据,是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                        this.$axios.post('http://localhost:8081/delXiezilou?ids=' + ids)
                        this.reload()
                        console.log('删除成功')
                    }
                )
            },
            deleteFileOrDirectory1 () {
                var ids = this.sels.map(item => item.xzid).join()// 获取所有选中行的id组成的字符串，以逗号分隔
                const that = this
                this.$axios.post('http://localhost:8081/selXiezilouById?xzid=' + ids)
                    .then(function (response) {
                        that.ruleForm = response.data.log // 把获取到的数据赋给this.data
                        console.log(that.ssld)
                    })
                this.dialogUpdate1 = true
            },
            handleEdit (index, row) {
                this.dialogUpdate = true
                this.ruleForm = Object.assign({}, row) // 这句是关键！！！
            },
            handleEdit1 (index, row) {
                this.dialogUpdate = true
                this.ruleForm = Object.assign({}, row) // 这句是关键！！！
            },
            async del (id) {
                const confirmResult = await this.$confirm('此操作将永久删除用户,是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err)
                // eslint-disable-next-line eqeqeq
                if (confirmResult != 'confirm') {
                    return this.$message.info('已取消删除')
                }
                this.$axios.post('http://localhost:8081/deleteWait1?id=' + id)
                this.reload()
            },
            cancel () {
                this.dialogUpdate = false
                this.dialogVisible = false
                this.emptyUserData()
            },
            emptyUserData () {
                this.ruleForm = {
                    xzid: this.ruleForm.xzid,
                    yzname: this.ruleForm.yzname,
                    lh: this.ruleForm.lh,
                    fangh: this.ruleForm.fangh,
                    sgry: this.ruleForm.sgry,
                    crzyj: this.ruleForm.crzyj,
                    crzgbf: this.ruleForm.crzgbf,
                    lc: this.ruleForm.lc,
                    lcgw: this.ruleForm.lcgw,
                    zxbzj: this.ruleForm.zxbzj,
                    ljqy: this.ruleForm.ljqy
                }
            },
            addUser () {
                let postData = this.qs.stringify({
                    xzid: this.ruleForm1.xzid,
                    yzname: this.ruleForm1.yzname,
                    lh: this.ruleForm1.lh,
                    fangh: this.ruleForm1.fangh,
                    sgry: this.ruleForm1.sgry,
                    zxgs: this.ruleForm1.zxgs,
                    crzyj: this.ruleForm1.crzyj,
                    crzgbf: this.ruleForm1.crzgbf,
                    lc: this.ruleForm1.lc,
                    lcgw: this.ruleForm1.lcgw,
                    zxbzj: this.ruleForm1.zxbzj,
                    ljqy: this.ruleForm1.ljqy
                })
                this.$axios({
                    method: 'post',
                    url: 'http://localhost:8081/addXiezilou',
                    data: postData
                }).then(response => {
                    this.$axios.post('').then(response => {
                        this.tableData = response.data
                        this.currentPage = 1
                        this.reload()
                        this.$message({
                            type: 'success',
                            message: '已添加!'
                        })
                    }).catch(error => {
                        console.log(error)
                        this.reload()
                    })
                    this.getPages()
                    this.dialogVisible = false
                    console.log(response)
                }).catch(error => {
                    console.log(error)
                    this.reload()
                })
            },
            updateUser () {
                let postData = this.qs.stringify({
                    xzid: this.ruleForm.xzid,
                    yzname: this.ruleForm.yzname,
                    lh: this.ruleForm.lh,
                    fangh: this.ruleForm.fangh,
                    sgry: this.ruleForm.sgry,
                    zxgs: this.ruleForm.zxgs,
                    crzyj: this.ruleForm.crzyj,
                    crzgbf: this.ruleForm.crzgbf,
                    lc: this.ruleForm.lc,
                    lcgw: this.ruleForm.lcgw,
                    zxbzj: this.ruleForm.zxbzj,
                    ljqy: this.ruleForm.ljqy
                })
                this.$axios({
                    method: 'post',
                    url: 'http://localhost:8081/updateXiezilou',
                    data: postData
                }).then(response => {
                    this.handleCurrentChange()
                    this.cancel()
                    this.$message({
                        type: 'success',
                        message: '更新成功!'
                    })
                    console.log(response)
                    this.reload()
                }).catch(error => {
                    this.$message({
                        type: 'success',
                        message: '更新失败!'
                    })
                    console.log(error)
                    this.reload()
                })
            },
            onSearch () {
                let postData = this.qs.stringify({
                    fhao: this.search,
                    name: this.search2,
                    zxgs: this.search3
                })
                this.$axios({
                    method: 'post',
                    url: 'http://localhost:8001/getByName1',
                    data: postData
                }).then(response => {
                    this.$axios({
                        method: 'post',
                        url: 'http://localhost:8001/rows1',
                        data: postData
                    }).then(response => {
                        this.total = response.data
                    })
                    this.users = response.data
                    this.disablePage = true
                }).catch(error => {
                    console.log(error)
                })
            },
            getPages () {
                let postData = this.qs.stringify({
                    anum: this.search,
                    astime: this.search2,
                    artime: this.search3
                })
                this.$axios({
                    method: 'post',
                    url: 'http://localhost:8001/rows1',
                    data: postData
                }).then(response => {
                    this.total = response.data
                }).catch(error => {
                    console.log(error)
                })
            },
            refreshData () {
                this.reload()
            },
            timer () {
                return setTimeout(() => {
                    this.onSearch()
                }, 100)
            }
        }
    }
</script>
<style scoped>
    .search_name{
        width: 200px;
    }

    .pages{
        margin: 0px;
        padding: 0px;
        text-align: right;
    }
</style>
